<template>
  <div style="display: flex">
    <div class="card" id="pie" style="height: 400px; width: 400px;"> </div>
    <div class="card" id="line" style="height: 400px;width: 400px;"> </div>
    <div class="card" id="college" style="height: 400px;width: 400px;"> </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

let pieOptions = {
  title: {
    text: '',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '50%',
    }
  ]
};

let collegepieOptions  = {
  title: {
    text: '',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'bottom',
    textStyle: {
      fontSize: 10  // 设置图例字体大小
    }
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '50%',
    }
  ]
};

let lineOptions = {
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
         xAxis: {
           type: 'category',
           boundaryGap : false,
           axisLine: {
             onZero: false,
             lineStyle: {
               color: '#4b87a9'
             }
           },
           data: ["01","02","03","04","05","06","07","08","09","10","11","12"]
         },
         yAxis: {
           type: 'value',
           axisLine: {
             onZero: false,
             lineStyle: {
               color: '#4b87a9'
             }
           },
           splitLine: { //网格线
             show: false
           }
         },
         series: [
           {
             name: '数量',
             type: 'line',
             data: [0,0,0,0,0,0,0,0,0,0,0,0], // 初始化为空数组，后续将从 API 获取数据填充
             smooth: true,
             itemStyle: {
               normal: {
                 color: '#fff',
                 borderColor: '#4bc8db',
                 areaStyle: {
                   type: 'default',
                   opacity: 0.4
                 }
               }
             },
             lineStyle: {
               // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
               color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 0,
                 colorStops: [{
                   offset: 0, color: '#4C84FF' // 0% 处的颜色
                 }, {
                   offset: 1, color: '#28d016' // 100% 处的颜色
                 }],
                 globalCoord: false // 缺省为 false
               },
               width: 2,
               shadowBlur: 10,
               shadowColor: 'rgba(50,227,42,0.5)',
               shadowOffsetX: 10,
               shadowOffsetY: 20
             },
             areaStyle: {
               normal: {
                 color: 'rgba(255,255,255,0)'
               }
             },
           }
         ]
};

export default {
    name: 'Contestoverview',
    data() {
      return {
        user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
        notices: [],
      }
    },
    created() {
      this.$request.get('/notice/selectAll').then(res => {
        this.notices = res.data || []
      })
      this.getPie()
      this.getLine()
      this.getcollegePie()
    },
    methods: {
      getPie(){
        this.$request.get('/contest/getPie').then(res => {
         if(res.code === '200'){
           let chartDom = document.getElementById('pie');
           let myChart = echarts.init(chartDom);
           pieOptions.title.text = res.data.text
           pieOptions.title.subtext = res.data.subtext
           pieOptions.series.name = res.data.name
           pieOptions.series[0].data = res.data.data
           myChart.setOption(pieOptions);
         }else{
           this.$message.error(res.msg)
         }
        })
      },
      getLine(){
        this.$request.get('/contest/getLine').then(res => {
               if (res.code === '200') {
                   let chartDom = document.getElementById('line');
                   let myChart = echarts.init(chartDom);
                   // 假设 res.data 是一个包含月份计数信息的 Map，如 { "11": 5, "12": 3 }
                   let monthCountMap = res.data.mon;
                   // 提取 Map 的键作为横坐标数据
                   let xAxisData = Object.keys(monthCountMap);
                   // 提取 Map 的值作为纵坐标数据
                   let yAxisData = Object.values(monthCountMap);
                   for (let i = 0; i < xAxisData.length; i++) {
                       let month = xAxisData[i];
                       let index = lineOptions.xAxis.data.indexOf(month);
                       if (index >= 0) {
                           // 将 yAxisData 中相应元素的值赋给 lineOptions.series[0].data 中相应索引位置
                           lineOptions.series[0].data[index] = yAxisData[i];
                       }
                   }
                   lineOptions.title.text = res.data.text
                   lineOptions.title.subtext = res.data.subtext
                   lineOptions.series.name = res.data.name
                   myChart.setOption(lineOptions);
               } else {
                   this.$message.error(res.msg);
               }
              })
      },
      getcollegePie(){
        this.$request.get('/artwork/getcollegePie').then(res => {
          if (res.code === '200') {
            let chartDom = document.getElementById('college');
            let myChart = echarts.init(chartDom);
            collegepieOptions.title.text = res.data.text;
            collegepieOptions.title.subtext = res.data.subtext;
            collegepieOptions.series[0].name = res.data.name;
            // 将数据转换为 Echarts 需要的格式，这里需要将对象中的键值对转换为数组元素
            collegepieOptions.series[0].data = Object.entries(res.data.data).map(([name, value]) => ({ name, value }));
            myChart.setOption(collegepieOptions);
          } else {
            alert(res.msg);
          }
        })
      },
    }
  }
</script>

